coffee/pages/products/[slug].js

import { Grid, Tab, Tabs, Typography } from '@mui/material';
import { Box, Container } from '@mui/system';
import Image from 'next/image';
import React, { useState } from 'react';
import ProductCard from '../../components/product-card/ProductCard';
import TabPanel from '../../components/tab-panel/TabPanel';

const SingleProduct = () => {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

  return (
    <Box
      sx={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Container
        sx={{
          width: '1273px',
        }}
      >
        <Typography
          fontFamily={'body1.fontFamily'}
          fontSize="32px"
          sx={{ mt: 25, height: '100%', color: 'primary.main' }}
        >
          Minimalist Printed Mug
        </Typography>
        <Grid container spacing={2} sx={{ height: '100%', width: '100%' }}>
          <Grid item lg={6}>
            <Image
              src="/images/product-card-image.jpg"
              alt="product"
              width={630}
              height={390}
            />
          </Grid>
          <Grid item lg={6}>
            <Tabs
              sx={{
                '& button:focus': {
                  borderTop: '1px solid black',
                  borderLeft: '1px solid black',
                  borderRight: '1px solid black',
                  borderRadius: '5px 5px 0 0',
                  borderBottom: 'none',
                },
              }}
              value={value}
              onChange={handleChange}
              aria-label="basic tabs example"
            >
              <Tab
                sx={{
                  width: '50%',
                }}
                label="Purchase"
                {...a11yProps(0)}
              />
              <Tab sx={{ width: '50%' }} label="Category" {...a11yProps(1)} />
            </Tabs>
            <TabPanel value={value} index={0}>
              <Box display="flex" flexDirection="row" justifyContent="right">
                <Box>
                  <Typography>
                    Our simple and sturdy mugs are made to last. With a
                    minimalist desings you will soon be enjoying your next brew.
                  </Typography>
                </Box>
                <Box
                  justifyContent="flex-end"
                  sx={{ display: 'flex', flexDirection: 'column' }}
                >
                  <Typography align="right">$20</Typography>
                </Box>
              </Box>
            </TabPanel>
            <TabPanel value={value} index={1}>
              Mugs & Cups
            </TabPanel>
          </Grid>
        </Grid>

        <Typography
          sx={{ mt: 25, mb: 5, color: 'primary.main', fontSize: '32px' }}
        >
          Other Product You May Like
        </Typography>
        <Grid container spacing={2} sx={{ height: '100%', width: '100%' }}>
          <Grid item lg={4}>
            <ProductCard />
          </Grid>
          <Grid item lg={4}>
            <ProductCard />
          </Grid>
          <Grid item lg={4}>
            <ProductCard />
          </Grid>
        </Grid>
      </Container>
    </Box>
  );
};

export default SingleProduct;